<template>
    <div class="page">
        <div class="header">
            <img src="/images/header.png" id="show">
            <input type="file" id="docpicker" accept="image/*">
            <div class="header-title">登录</div>
        </div>
        <div class="tel">
            <input type="number" placeholder='输入手机号' v-model="mobile" id="phone1"  v-if="mobileShow">
            <input type="number" placeholder='输入验证码'  v-else v-model="captcha" @input ="login">
        </div>
        <div class="clearfloat">
            <div class="btn btn-default" id="btnSendCode1">
                <mt-button size="small" type="primary" @click="send" v-if="mobileShow">获取验证码</mt-button>
                <mt-button size="small" type="default" @click="send" v-else>重新获取({{time}})</mt-button>
            </div>
        </div>
    </div>
</template>
<script>
    import { Button } from 'mint-ui';
    Vue.component(Button.name, Button);
    import {pageConfig} from '@/config';
    export default {
        name: 'login',
        data(){
            return {
                mobileShow: true,
                timestart: false,
                time:120,
                mobile: '',
                captcha: '',
                InterValObj1: null
            }
        },
        created: function () {
            if (this.InterValObj1 !== null) {
                clearInterval(this.InterValObj1)
            }
        },
        methods: {
            send() {
                if (!this.$util.isPhone(this.mobile)) {
                    this.$toast('手机号输入错误');
                    return;
                }
                let that = this;
                this.$http.$ajax('send', pageConfig.public, {
                    mobile: this.mobile,
                    event: 'mobilelogin'
                }, {loading: '发送短信中...', success:(res)=> {
                    that.mobileShow = false;
                    that.InterValObj1 = window.setInterval(this.setRemainTime1, 1000); //启动计时器，1秒执行一次
                }});
            },

            login() {
                let count = this.captcha.length;
                let that = this;
                if (count === 4 && this.mobileShow === false) {
                    this.$http.$ajax('login', pageConfig.public, {
                        mobile: this.mobile,
                        captcha: this.captcha,
                    }, {loading: '登陆中...', success:function(res) {
                        let data = res.data.userinfo;
                        that.$user.setUinfo(data);
                        that.mobileShow = true;
                        window.clearInterval(that.InterValObj1);//停止计时器
                        //登陆后跳转到首页 重新加载
                        that.$router.go(-1);
                    }});
                }
            },
            setRemainTime1() {
                if (this.time <= 0) {
                    window.clearInterval(this.InterValObj1);//停止计时器
                    this.mobileShow = true;
                    this.time =120;
                }
                else {
                    --this.time;
                }
            }
        },
        computed: {

        }
    }
</script>
<style scoped>
    .header{
        margin-left: 73px;
        margin-top: 71px;
        display: flex;
        align-items: center;
        position: relative;
    }
    .page {
        background-color: #fff;
        height: 100vh;
    }
    /deep/ .mint-button--primary {
        background-color: #6A74F6;
    }
    .header img{
        width: 142px;
        height: 144px;
    }
    .header-title{
        margin-left: 41px;
        font-size: 30px;
        font-weight: bold;
        margin-top: -30px;
    }
    #docpicker{
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 0;
        outline: none;
        filter: alpha(opacity=0);
        opacity: 0;
    }
    .tel{
        border-bottom: 2px solid rgb(205, 205, 205);
        padding-bottom: 16px;
        margin-left: 63px;
        margin-right: 63px;
        margin-top: 51px;
    }
    .tel input{
        font-size: 24px;
        border: none;
        outline:none;
        background: #fff;
        width: 100%;
        height: 60px;
    }
    #code{
        display: none;
    }
    .clearfloat:after{
        display:block;
        clear:both;
        content:"";
        visibility:
                hidden;height:0
    }
    .clearfloat{
        zoom:1
    }
    #btnSendCode1{
        float: right;
        color: #6A74F6;
        margin-top: 35px;
        margin-right: 63px;
        border: none;
        background: none;
        outline: none;
    }
    .wechat{
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-bottom: 146px;
        margin-left: -34.5px;
    }

    .notice{
        width: 556px;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -278px;
        margin-bottom: 57px;
        text-align: center;
        color: #ADADAD;
        font-size: 21px;
    }
</style>
